<template>
  <div id="app">
    <!-- 主内容区域 -->
    <router-view v-slot="{ Component, route }">
      <transition 
        :name="getTransitionName(route)" 
        mode="out-in"
        @before-enter="onBeforeEnter"
        @after-leave="onAfterLeave"
      >
        <keep-alive :include="keepAlivePages">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>

    <!-- 底部导航栏 -->
    <NavBar v-if="!route.meta?.hideNavBar" />
  </div>
</template>

<script setup>
import { computed, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar/index.vue'

const route = useRoute()

// 需要缓存的页面
const keepAlivePages = computed(() => {
  const pages = []
  if (route.meta?.keepAlive) {
    pages.push(route.name)
  }
  return pages
})

// 获取过渡动画名称
const getTransitionName = (route) => {
  // 根据路由的层级决定动画方向
  if (route.meta?.transition) {
    return route.meta.transition
  }
  
  // 默认使用淡入淡出
  return 'fade'
}

// 进入动画前的处理
const onBeforeEnter = () => {
  // 确保页面滚动到顶部
  if (document.documentElement) {
    document.documentElement.scrollTop = 0
  }
  if (document.body) {
    document.body.scrollTop = 0
  }
}

// 离开动画后的处理
const onAfterLeave = () => {
  // 强制垃圾回收，优化内存
  if (window.gc) {
    window.gc()
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100vw;
  height: 100vh;
  background-color: $bg-dark;
  overflow: hidden;
  position: relative;
  
  // 移动端安全区域适配
  @supports (padding: env(safe-area-inset-left)) {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

// 路由切换动画 - 抖音风格
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

// 性能优化：在动画期间使用硬件加速
.fade-enter-active,
.fade-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}
</style> 